 <template>
  <div class="login">
       <div class="login-h2">
         <img :src="(h2)" alt="">
       </div>
       <div class="login-body">
         <img :src="(login1)" alt="">
       </div>
    <div class="login-from">
      <form action="">
      <p class="login-from-p1">
        <span>{{name}}</span>
        <span>{{code}}</span>
      </p>
      <p class="login-from-p2">
        <input type="text" v-model="username" placeholder="账户">
      </p>
      <p class="login-from-p2">
        <input type="password" v-model="userpassword" placeholder="密码">
      </p>
      <p class="login-from-p2">
        <button @click="login">登录</button>
      </p>
     <div class="login-p">
        <p>
        <a href="">{{a}}</a>
      </p>
      <p class="p">
        <span>立即注册</span>
        <span>忘记密码</span>
      </p>
       <p class="login-last-P" style="margin-top:50px">
       <a href=""><img src="../../assets/icon.png" alt=""></a>
     </p>
     </div>
    
      <!-- <div class="success" v-show="isfalse">
        <h2>注册成功</h2>
       <div class="success-body" v-show="isfalse">
          <span>登录</span>
          <span>取消</span>
       </div>
       </div> -->
    </form>
    </div>
  </div>
</template>

<script>
 
export default {
  data:()=>({
    a:"手机短信登录注册",
    name:"账户登录",
    code:"扫码登录",
    login1:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aece569d6689b4c461bb53efd9eea9c7.jpg",
    h2:"https://account.xiaomi.com/static/res/7f6f2f5/account-static/respassport/acc-2014/img/mistore_logo.png",
    isfalse:true,
    username:"",
    userpassword:""
  }),
  created(){
  },
  methods:{
    login(){
      console.log(JSON.parse(localStorage.getItem('userList'||'[]')))
       const userList=JSON.parse(localStorage.getItem('userList'||'[]'))
        userList.forEach(el => {
          if(this.username == el.name && this.userpassword == el.password){
             alert('登录成功')
            //  页面跳转到另一个页面 路由
            this.$router.push({
            path:"/"
           })
          }else{
              alert('请输入正确的密码或账户')
          }
        });
    }
  }
  
}
</script>

<style lang="less">
  .login{
    height: 500px;
    width: 1200px;
    position: relative;
    margin: auto;
   
     .login-body{
      height: 400px;
      width: 1200px;
      position: relative;
      
      img{
      width: 1200px;
      height: 400px;
      position: absolute;
      left: 50%;
      margin-left: -600px;
      }
    }
    .login-from{
      height: 380px;
      width: 300px;
      background: #fff;
      position: absolute;
      left: 835px;
      top: 122px;
      
      .login-from-p1{
        width:298px;
        text-align: center;
        span:first-child{
          border-right:2px solid black;
          padding: 0px 15px;
        }
        span:last-child{
          padding: 0px 15px;
        }
      }
        .login-from-p2{
          margin-left: 20px;
           input{
             text-indent: 10px;
             width:250px;
             height:40px;
             border: 1px solid #999;
           }
          button{
             width:255px;
             height:40px;
             background:#ff6700;
             color:#ffffff;
          }
        }
        .login-p{
          width: 300px;
          text-align: center;
          p:first-child{
            a{
              color: #ff6700;
              text-decoration:none;
            }
          }
          .p{
            span{
            color: #999;
              padding: 0px 5px;
              &:last-child{
                border-left: 1px solid black;
              }
            }
          }
        }
    }
  }
</style>
//  .success{
//         position: absolute;
//         top: 100px;
//         left: 313px;
//         height:115px;
//         width:300px;
//         background:#f9f9f9;
//         border-radius: 5px;
//         opacity: 0.9;
//         box-shadow: 2px 2px 2px 2px;
//        .success-body{
//            width:276px;
//            span:first-child{
//              width: 70px;
//              height: 25px;
//              background: green;
//              float: left;
//              color: #fff;
//              text-align: center;
//              line-height: 25px;
//              box-shadow: 2px 2px 2px 2px;
//              margin-left: 20px;
//              border-radius: 3px;
//            }
//            span:last-child{
//              border-radius: 3px;
//              float: right;
//              width: 70px;
//              height: 25px;
//              background: red;
//              color: #fff;
//              text-align: center;
//              line-height: 25px;
//              box-shadow: 2px 2px 2px 2px;
         
//            }
//         }
//       }